<template>
  <div>
    <div :hidden="userInfo" class="CLICKdiv">
      <img src="../assets/img/1wn.png" alt="" />
      <img src="../assets/img/wn2.png" alt="" />
      <a class="clickA" href="login" @click="setGoToPage('myMusic')"
        >点击此处登录</a
      >
    </div>
    <div class="middlewrap" :hidden="!userInfo">
      <div class="container">
        <div class="left">
          <div class="f mysinger">我的歌手({{ singernumber }})</div>
          <div class="f myvideo">我的视频({{ videonumber }})</div>
          <div class="f createdsinglist">
            <div @click="createflag = !createflag">创建的歌单({{ crnum }})</div>
            <div v-if="createflag">
              <div
                class="hh"
                @click="getSongListDetail(createnumber[index].id)"
                v-for="(
                  { coverImgUrl, trackCount, name }, index
                ) in createnumber"
                :key="index"
              >
                <div>
                  <img :src="coverImgUrl" alt="" />
                </div>
                <div class="hh-ss">
                  <p>{{ name }}</p>
                  <p>{{ trackCount }}首</p>
                </div>
              </div>
            </div>
          </div>
          <div class="f collectsinglist">
            <div @click="collectflag = !collectflag">
              收藏的歌单({{ clnum }})
            </div>
            <div v-if="collectflag">
              <div
                class="hh"
                @click="getSongListDetail(collectnumber[index].id)"
                v-for="(
                  { coverImgUrl, trackCount, name, creator }, index
                ) in collectnumber"
                :key="index"
              >
                <div>
                  <img :src="coverImgUrl" alt="" />
                </div>
                <div class="hh-ss">
                  <p>{{ name }}</p>
                  <p>{{ trackCount }}首 &nbsp;by{{ creator.nickname }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-top">
            <div class="top-left">
              <img :src="obj2.coverImgUrl" alt="" class="top-left" />
            </div>
            <div class="top-right">
              <p class="right-first">
                <span class="span1">歌单</span>
                <span class="span2">{{ obj2.name }} </span>
              </p>
              <p class="right-second">
                <img
                  :src="creator.avatarUrl"
                  alt=""
                  class="userImg"
                />&nbsp;&nbsp;&nbsp;
                <span class="username">{{ creator.nickname }}</span
                >&nbsp;&nbsp;&nbsp;
                <span class="createTime">{{
                  moment(obj2.createTime).format("YYYY年MM月DD日")
                }}</span>
              </p>
              <p class="right-third">
                <button>播放</button>
                <button>分享</button>
                <button>下载</button>
                <button>评论</button>
              </p>
            </div>
          </div>
          <div class="right-body">
            <div class="songbar">
              <div class="songbar-top">
                <span class="songbar-top1">歌曲列表</span>
                <span class="songbar-top2">{{ obj2.trackCount }}首歌</span>
                <span class="songbar-top3">播放：{{ obj2.playCount }}次</span>
              </div>
              <div class="songbar-bottom">
                <span class="songtitle">歌曲标题</span>
                <span class="duration">时长</span>
                <span class="singers">歌手</span>
                <span class="album">专辑</span>
              </div>
            </div>
            <div class="songlist">
              <table>
                <tbody>
                  <tr class="tr" v-for="(n, index) in soonglistArray" :key="n">
                    <td class="songtitledeatil">
                      {{ index + 1 }}&nbsp;&nbsp;{{
                        soonglistArray[index].name
                      }}
                    </td>
                    <td class="durationdeatil">
                      {{ moment(soonglistArray[index].dt).format("mm:ss") }}
                    </td>
                    <td class="singersdeatil">
                      {{ soonglistArray[index].ar[0].name }}
                    </td>
                    <td class="albumdeatil">
                      {{ soonglistArray[index].al.name }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      usersonglist: null,
      username: "",
      createTimes: "",
      singernumber: "",
      videonumber: "",
      crnum: "",
      clnum: "",
      createnumber: "",
      createflag: true,
      collectnumber: "",
      collectflag: true,
      songsnum: "",
      playnum: "",
      songname: "",
      songtime: "",
      mysongtime: "",
      songauthor: "",
      songalbum: "",
      soonglistArray: "",
      moment: moment,
      creator: "",
      obj2: "",
    };
  },
  computed: {
    ...mapState(["userInfo", "goToPage"]),
  },
  methods: {
    ...mapGetters(["getUserInfo"]),
    ...mapMutations(["setGoToPage"]),
    getuserSonglist() {
      //获取用户歌单
      if (!this.userInfo) {
        console.log("用户未登录，请先登录");
        return;
      }
      let account = this.userInfo.account;
      const url = "user/playlist?uid=" + account.id;
      // const Aurl = "http://localhost/user-playlist-uid.json";
      this.axios.get(url).then(res => {
        console.log("usersonglist:" + JSON.stringify(res.data.playlist));
        var obj = res.data.playlist;

        var s = "";
        for (let i = 0; i < obj.length; i++) {
          if (obj[i].userId != account.id) {
            this.createnumber = obj.slice(0, i);
            this.collectnumber = obj.slice(i);
            this.crnum = this.createnumber.length;
            this.clnum = this.collectnumber.length;
            break;
          }
        }
        //获取歌单详情
        this.getSongListDetail(this.createnumber[0].id);
        // console.log("111:" + this.usersonglist);
      });
    },

    getSongListDetail(id) {
      var cookie = localStorage.getItem("cookie");
      this.axios
        .get("playlist/detail?id=" + id + "&cookie=" + cookie)
        .then(res => {
          console.log("songsidres:" + JSON.stringify(res));
          // this.createTimes = moment(obj2.createTime).format("YYYY年MM月DD日");
          this.obj2 = res.data.playlist;
          this.creator = this.obj2.creator;
          this.soonglistArray = this.obj2.tracks;
          // console.log("duration:" + duration);
        });
    },
  },
  mounted() {
    this.getuserSonglist();
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.CLICKdiv {
  width: 70%;
  margin: 0 auto;
  // background-color: rgb(88, 42, 42);
  image {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-left: 100px;
  }

  .clickA {
    display: inline-block;
    background-color: rgb(103, 152, 168);
    color: white;
    padding: 10px;
    font-size: 20px;
    width: 150px;
    height: 20px;
    text-align: center;
  }
}

.middlewrap {
  width: 980px;
  overflow: hidden;
  /* min-height: 1500px; */
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-color: #fff;
}
.container {
  border: 2px solid red;
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left {
    width: 20%;
    .f {
      margin: 30px 0;
      font-size: 15px;
    }
    img {
      width: 30px;
      height: 30px;
    }
    p {
      font-size: 10px;
      // height: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      // width: 80%;
    }
    .hh {
      display: flex;
      justify-content: flex-start;
      margin: 18px 0;
    }
    .hh-ss {
      width: 70%;
      margin-left: 15px;
    }
  }
  .right {
    width: 90%;
    border: 1px solid grey;
    .right-top {
      display: flex;
      justify-content: space-between;
      padding-top: 30px;
      .top-left {
        img {
          width: 120px;
          height: 120px;
        }
      }

      .top-right {
        width: 80%;
        margin-left: 20px;
        .right-first {
          .span1 {
            padding: 5px;
            background-color: red;
          }
          .span2 {
            padding-left: 10px;
            font-size: 20px;
          }
        }
        .right-second {
          margin-top: 20px;
          .userImg {
            width: 30px;
            height: 30px;
          }
        }
        .right-third {
          margin-top: 20px;
          button {
            margin-right: 10px;
            padding: 5px;
          }
        }
      }
    }
    .right-body {
      margin-top: 50px;
      width: 100%;
      .songbar {
        width: 100%;
        .songbar-top {
          padding: 10px 0;
          border-bottom: 2px solid red;

          .songbar-top1 {
            margin-left: 40px;
            font-size: 20px;
          }
          .songbar-top2 {
            padding-left: 30px;
          }
          .songbar-top3 {
            margin-left: 750px;
          }
        }
        .songbar-bottom {
          padding: 10px 0;
          border-bottom: 2px solid grey;
          span {
            border-right: 2px solid grey;
            // height: 12px;
          }
          .songtitle {
            display: inline-block;
            width: 50%;
            padding-left: 60px;
          }
          .duration {
            display: inline-block;
            text-align: center;
            width: 10%;
          }
          .singers {
            display: inline-block;
            text-align: center;
            width: 15%;
          }
          .album {
            display: inline-block;
            text-align: center;
            width: 15%;
            border-right: 0;
          }
        }
      }
      .songlist {
        width: 100%;
        table {
          width: 100%;

          tbody {
            tr {
              // width: 100%;
              td {
                padding: 10px 0;
              }
              .songtitledeatil {
                display: inline-block;
                width: 50%;
                padding-left: 60px;
              }
              .durationdeatil {
                display: inline-block;
                text-align: center;
                width: 10%;
              }
              .singersdeatil {
                display: inline-block;
                text-align: center;
                width: 15%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .albumdeatil {
                display: inline-block;
                text-align: center;
                width: 15%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            tr:nth-child(2n) {
              background-color: rgb(179, 172, 172);
            }
          }
        }
      }
    }
  }
}
</style>
